<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        v-if="showCollapse"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        class="avue-breadcrumb"
      >
        <i class="icon-navicon" @click="setCollapse" />
      </div>
    </div>
    <div class="top-bar__title">
      <div v-if="showMenu" class="top-bar__item top-bar__item--show">
        <top-menu />
      </div>
      <span class="more-module">
        <top-module />
      </span>
      <!--<span v-if="showSearch"
            class="top-bar__item">
        <top-search />
      </span>-->
    </div>
    <div class="top-bar__right">
      <!-- <el-tooltip :content="$t('common.workbench')"
                  placement="bottom"
                  :enterable="false">
        <div class="top-bar__item top-bar__item--show"
             @click="$router.push({path:'/workbench'})">
          <i class="iconfont iconmonitor"
             style="font-size:16px !important;cursor:pointer"></i>
        </div>
      </el-tooltip>-->
      <el-tooltip effect="dark" :content="$t('header.user.schedule')" placement="bottom">
        <div class="top-bar__item">
          <i
            class="iconfont icondate"
            style="cursor:pointer;font-size:18px !important"
            @click="toSchedule()"
          ></i>
        </div>
      </el-tooltip>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-badge
            v-if="noticeToDoList.length>0"
            :value="noticeToDoList.length"
            :max="99"
            style="font-size: 18px;margin: 0 6px"
          >
            <i class="el-icon-bell" style="line-height: 36px" />
          </el-badge>
          <i v-else class="el-icon-bell" style="font-size: 18px;margin: 0 6px;line-height: 36px;" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <div class="notice-top-list-box">
            <div class="top-box">
              <i class="el-icon-message-solid" />
              <span>新消息提醒</span>
              <el-button type="text" size="mini" @click="allRead()" class="mark-read">全部标记为已读</el-button>
            </div>
            <div class="notice-list-content">
              <div class="no-new-notice" v-if="noticeToDoList.length<1">暂无新消息</div>
              <div
                class="notice-item"
                title="查看详情"
                :key="index"
                v-if="index<10"
                v-for="(item,index) in noticeToDoList"
                @click="toNoticeDetail(item.routerUrl, item.routerParam, item.routePrefixFront, item.id)"
              >
                <div class="notice-type">
                  <!-- <i class="el-icon-s-check"></i> -->
                  <i class="el-icon-date"></i>
                  <span>{{item.tplTypeName}}</span>
                </div>
                <el-link :underline="false" class="notice-detail">{{item.content}}</el-link>
                <div class="notice-time">{{item.createTime}}</div>
              </div>
            </div>
            <div class="bottom-box" v-if="noticeToDoList.length>0">
              <el-button type="text" @click="lookAllNotice">查看全部消息</el-button>
            </div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <!--<el-tooltip effect="dark"
                  :content="$t('header.user.helpCentor')"
                  placement="bottom">
        <div class="top-bar__item">
          <i class="iconfont iconbangzhu"
             style="cursor:pointer;font-size:18px !important"
             @click="openPlatformWindow('/helpHome', false, '/portal_html')"></i>
        </div>
      </el-tooltip>-->
      <el-tooltip effect="dark" :content="$t('navbar.language')" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip>
      <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
        <div class="top-bar__item">
          <top-color />
        </div>
      </el-tooltip>
      <!--<el-tooltip :content="unreadCount?unreadCount+' '+$t('navbar.messageLength'):$t('navbar.notice')"
                  effect="dark"
                  placement="bottom">
        <div class="top-bar__item">
          <span @click="goNotice">
            <el-badge :value="unreadCount"
                      :max="99">
              <i class="el-icon-bell" />
            </el-badge>
          </span>
        </div>
      </el-tooltip>-->
      <el-tooltip v-if="showLock" effect="dark" :content="$t('navbar.lock')" placement="bottom">
        <div class="top-bar__item">
          <top-lock />
        </div>
      </el-tooltip>
      <!-- <el-tooltip v-if="showTheme"
                  effect="dark"
                  :content="$t('navbar.theme')"
                  placement="bottom">
      <div class="top-bar__item">-->
      <top-theme v-show="false" />
      <!-- </div>
      </el-tooltip>-->
      <el-tooltip
        v-if="showFullScren"
        :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
        effect="dark"
        placement="bottom"
      >
        <div class="top-bar__item" style="margin-right:30px">
          <!-- <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
          @click="handleScreen" />-->
          <div class="screen">
            <img @click="handleScreen" :src="isFullScren?offScreen:screen" />
          </div>
        </div>
      </el-tooltip>
      <el-tooltip
        v-if="userInfo.avatar"
        effect="dark"
        :content="$t('navbar.userHead')"
        placement="bottom"
      >
        <img id="thumbnail" class="top-bar__img" :src="minioServe+'/user-picture/'+userInfo.avatar" />
      </el-tooltip>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.username }}
          <i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided>
            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item>
          <!-- <el-dropdown-item divided
                            @click.native="$refs.seting.open()">界面设置
          </el-dropdown-item>-->
          <el-dropdown-item divided @click.native="logout">{{$t('navbar.logOut')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import {
  fullscreenToggel,
  handleImg,
  listenfullscreen,
  getPlatformComponentsPath
} from "../../../util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topModule from "./top-module";
import topTheme from "./top-theme";
import topColor from "./top-color";
import topLang from "./top-lang";
import screen from "../../../assets/img/screen.png";
import offScreen from "../../../assets/img/offScreen.png";
import {
  getCount,
  getNoticeForHomePageList,
  setReadNoticeForHomePage
} from "../../../api/notice";
import { openPlatformWindow } from "../../../util/util";

export default {
  name: "Top",
  components: {
    topLock,
    topMenu,
    topSearch,
    topModule,
    topTheme,
    topColor,
    topLang
  },
  filters: {},
  data() {
    return {
      screen,
      offScreen,
      unreadCount: "",
      openPlatformWindow,
      noticeToDoList: []
    };
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showCollapse: state => state.common.showCollapse,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters([
      "minioServe",
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag"
    ])
  },
  created() {
    getCount().then(res => {
      this.unreadCount = res.data.data || "";
    });
    this.getNoticeToDoList();
  },
  mounted() {
    listenfullscreen(this.setScreen);
    // handleImg(this.userInfo.avatar, 'thumbnail')
  },
  methods: {
    // 获取待办list
    getNoticeToDoList() {
      getNoticeForHomePageList()
        .then(res => {
          if (res.data.meta.success) {
            this.noticeToDoList = res.data.data;
          } else {
            this.noticeToDoList = [];
          }
        })
        .catch(err => {
          this.noticeToDoList = [];
        });
    },
    // 全部标记为已读
    allRead(id) {
      let idList = [];
      if (id) {
        idList = [id];
      } else {
        for (let i = 0, len = this.noticeToDoList.length; i < len; i++) {
          idList.push(this.noticeToDoList[i].id);
        }
      }
      setReadNoticeForHomePage(idList).then(res => {
        if (res.data.meta.success) {
          this.getNoticeToDoList();
        }
      });
    },
    // 日程
    toSchedule() {
      getPlatformComponentsPath(
        this.$router,
        `/customer/schedule/index&prefix=/admin&name=日程`
      );
    },
    // 查看全部消息
    lookAllNotice() {
      getPlatformComponentsPath(
        this.$router,
        `/noticeMsg/myNotice/index-2&prefix=/admin&name=我的通知消息`
      );
    },
    // 参数封装
    toParams(param) {
      var result = "";
      for (let name in param) {
        if (name === "name") {
          continue;
        }
        if (typeof param[name] != "function") {
          result += "&" + name + "=" + encodeURI(param[name]);
        }
      }
      return result.substring(1);
    },
    // 消息跳转详情
    toNoticeDetail(routerUrl, routerParam, routePrefixFront, id) {
      if (routerUrl) {
        // 标记该条已读
        this.allRead(id);
        // 路由参数
        let urlParamsObj = JSON.parse(routerParam);
        // 路由地址
        let urlSrc = routerUrl;
        if (urlParamsObj.name === "E") {
          // 区分计划订单
          urlParamsObj.name = "E计划订单详情";
          urlSrc = "/planningOrderHumanmade/detail/" + urlParamsObj.id;
        } else if (urlParamsObj.name === "F") {
          // 区分计划订单
          urlParamsObj.name = "F计划订单详情";
          urlSrc = "/planningOrderPurchase/detail/" + urlParamsObj.id;
        } else if (urlSrc === "/projectCostAdjustDetail/index") {
          // 费控-项目预算调整详情
          localStorage.setItem("projectBudgetId", urlParamsObj.billId);
          localStorage.setItem("projectAdd", false);
        } else if (urlSrc === "/costBudgetAdjustDetail/index") {
          // 费控-部门预算调整详情
          localStorage.setItem("costBudgetId", urlParamsObj.billId);
          localStorage.setItem("isAdd", false);
        }
        let urlParams = "?" + this.toParams(urlParamsObj);
        // 跳转
        getPlatformComponentsPath(
          this.$router,
          `${urlSrc}${urlParams}&prefix=${routePrefixFront}&name=${urlParamsObj.name}`
        );
      }
    },
    goNotice() {
      this.$router.push({ path: "/notice" });
    },
    handleScreen() {
      fullscreenToggel();
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    logout() {
      this.$confirm(
        this.$t("navbar.isLogOut") + "?",
        this.$t("processDialog.tips"),
        {
          confirmButtonText: " ",
          confirmButtonClass: "el-icon-check",
          cancelButtonText: " ",
          cancelButtonClass: "el-icon-close",
          type: "warning"
        }
      ).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.screen {
  height: 100%;
  display: flex;
  align-items: center;
}
/* 通知消息 */
.notice-top-list-box {
  color: #333;
  font-size: 12px;
  width: 420px;
  .top-box {
    color: #333;
    border-bottom: 1px solid #ebebeb;
    padding: 10px;
    span {
      padding: 0 5px;
    }
    .el-icon-message-solid,
    .icon-navicon {
      font-size: 14px;
      color: #2d8cf0;
    }
    .icon-navicon {
      cursor: pointer;
      &:hover {
        color: #66b1ff;
      }
    }
    .mark-read {
      float: right;
      margin-top: -5px;
      width: 100px !important;
    }
  }
  .notice-state-box {
    padding: 15px 10px 5px 20px;
    .state-item {
      margin-right: 24px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .notice-list-content {
    padding: 5px;
    max-height: 465px;
    width: 100%;
    overflow-y: auto;
    .no-new-notice {
      padding: 15px;
      text-align: center;
      color: #666;
    }
    .notice-item {
      padding: 5px;
      border-bottom: 1px solid #ebebeb;
      cursor: pointer;
      &:hover {
        background-color: #f5f7fa;
      }
      .notice-type {
        i {
          font-size: 14px;
          display: inline-block;
          width: 18px;
          height: 18px;
          color: #fff;
          background-color: #2d8cf0;
          border-radius: 100%;
          text-align: center;
          line-height: 18px;
          margin-right: 8px;
        }
        span {
          color: #2d8cf0;
        }
      }
      .notice-detail {
        padding: 3px 10px 3px 26px;
        word-break: break-all;
      }
      .notice-time {
        padding-left: 26px;
      }
    }
  }
  .bottom-box {
    text-align: center;
  }
}
</style>
